<html>
<head>
    <title>Example HTML Page</title>
    <style type="text/css">
        .hidden {
            display: none;
            visibility: hidden;
        }
    </style>
</head>
<body>
<h1>Example HTML Page</h1>
    <h2>Some random things we can make assertions on:</h2>
    <ul id="sausage">
        <li>Pet's name: <input name="pet" type="text" value="Boris" /></li>
        <li>Favourite number: <input name="number" type="text" value="64" /></li>
        <li>Hair colour: <input name="hair" type="text" value="Taupe" /></li>
    </ul>

<h2>Some data we wish to check or set:</h2>
<ul>
    <li>First Name: <input type="text" name="first_name"></li>
    <li>Surname: <input type="text" name="surname"></li>
    <li>Rank: <input type="text" name="rank"></li>
    <li>Serial Number: <input type="text" name="serial_number"></li>
    <li>Location: <input type="hidden" name="location" value="immutable">(hidden field)</li>
</ul>

<h2>A Dynamic Form We Can Make Asynchronous Assertions On</h2>
<h3>(Yes, this is so we can play with AJAX)</h3>
<form action="#">
    <input name="textfield" id="textfield" type="text" value="some data" />
    <input name="submitButton" id="submitButton" type="button" value="Pretend to do AJAX" />
    <input name="deleteHDD" id="deleteHDD" type="button" value="Wipe the user's hard drive and give 'em a biscuit" class="hidden"/>
    <input name="label" id="label" type="text" value="" disabled="disabled" />
</form>
<span id="destination"></span>
<script type="text/javascript">
    var button = document.getElementById("submitButton");
    var field = document.getElementById("textfield");
    var label = document.getElementById("label");
    var value;

    button.onclick = start;

    function start () {
        value = field.value;
        field.value = "Sleeping ...";
        label.value = "Sleeping ...";

        setTimeout(finish, 1000);
    }

    function finish() {
        label.value = value;
        field.value = "";
    }
</script>
</body>
</html>